<template>
  <div>
    <div
      style="margin-top: 20px; min-height: 50vh"
      v-loading="pageLoading"
      element-loading-text="加载中..."
      element-loading-background="#f2f0f4"
    >
      <div class="video-group" v-if="mobile === 'false' ? true : false">
        <div v-for="item of dataList" :key="item.id">
          <homeVideoItem :data="item"></homeVideoItem>
        </div>
      </div>
      <div v-else class="video-pc">
        <div v-for="item of dataList" :key="item.id">
          <homeVideoPc :data="item"></homeVideoPc>
        </div>
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.total"
      @change="onChange"
      :page-size="20"
      :page-count="page.pages"
      :pager-count="5"
      hide-on-single-page
      style="margin-top: 20px"
    />
  </div>
  <el-empty
    description="description"
    v-if="dataList.length <= 0 && !pageLoading"
  />
</template>

<script setup>
import request from "@/assets/js/request";
import { onMounted, ref } from "vue";
import homeVideoItem from "@/components/video/home-video-item.vue";
import homeVideoPc from "@/components/video/home-video-pc.vue";
import { ElMessage } from "element-plus";

const dataList = ref([]);
const page = ref({
  pageNum: 1,
  pages: 0,
  total: 0,
});
const pageLoading = ref(false);
const mobile = localStorage.getItem("mobile");
const getDataList = () => {
  pageLoading.value = true;
  request
    .get(`/client/hit/page?pageNum=${page.value.pageNum}`)
    .then((res) => {
      if (res.code === 200) {
        dataList.value = res.data.records;
        page.value.pageNum = res.data.current;
        page.value.total = res.data.total;
        page.value.pages = res.data.pages;
      }
      pageLoading.value = false;
    })
    .catch((err) => {
      ElMessage.error(err.message);
      pageLoading.value = false;
    });
};

const onChange = (num) => {
  page.value.pageNum = num;
  getDataList();
};

onMounted(() => {
  getDataList();
});
</script>

<style scoped lang="scss">
@mixin group-video($group, $gapWidth) {
  display: grid;
  grid-template-columns: repeat($group, 1fr);
  grid-gap: $gapWidth;
  align-items: center;
  justify-content: center;
}

.video-group {
  @include group-video(2, 10px);
}

.video-pc {
  @include group-video(5, 20px);
}
</style>
